import React, { Component } from "react";
import "./index.less";
import { Input, DatePicker, Button, Table } from "antd";
const { RangePicker } = DatePicker;

function onChange(value, dateString) {
  console.log("Selected Time: ", value);
  console.log("Formatted Selected Time: ", dateString);
}

function onOk(value) {
  console.log("onOk: ", value);
}
const dataSource = [
  {
    key: "1",
    name: "胡彦斌",
    age: 32,
    address: "西湖区湖底公园1号"
  },
  {
    key: "2",
    name: "胡彦祖",
    age: 42,
    address: "西湖区湖底公园1号"
  }
];

const columns = [
  {
    title: "操作人",
    dataIndex: "name",
    key: "name"
  },
  {
    title: "操作时间",
    dataIndex: "age",
    key: "age"
  },
  {
    title: "操作内容",
    dataIndex: "address",
    key: "address"
  }
];

export default class GeneralSet extends Component {
  render() {
    return (
      <div className="operat-record">
        <div className="operation">
          操作人：
          <Input style={{ width: 170 }} />
          <span className="evaluation-time">评价时间：</span>
          <RangePicker
            showTime={{ format: "HH:mm" }}
            format="YYYY-MM-DD HH:mm"
            placeholder={["Start Time", "End Time"]}
            onChange={onChange}
            onOk={onOk}
          />
          <div>
            <Button className="filter" type="primary">
              筛选
            </Button>
          </div>
        </div>
        {/* 表格 */}
        <div className="record-table">
          <Table dataSource={dataSource} columns={columns} />
        </div>
      </div>
    );
  }
}
